<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount } from 'vue';

onMounted(() => {
    // 图1
    var chartDom1 = document.getElementById('graph1');
    var myChart1 = echarts.init(chartDom1);
    var option1;
    // 图2
    var chartDom2 = document.getElementById('graph2');
    var myChart2 = echarts.init(chartDom2);
    var option2;

     // 图1相关配置
  option1 = {
    tooltip: {
      trigger: 'item'
    },
    color: ['#f35b08', '#f28703', '#f6b801', '#7578ed'],
    series: [
      {
        name: '健康状况',
        type: 'pie',
        radius: ['50%', '70%'],
        // 开启自动避让
        avoidLabelOverlap: true,
        center: ['50%', '50%'],
        itemStyle: {
          borderRadius: 2,
          borderColor: '#fff',
          borderWidth: 1,
        },
        label: {
          show: true,
          position: 'outside',           // 标签在外部
          formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
          // formatter: '{b}: {d}%',     // 也可以写在同一行
          color: '#333',
          fontSize: 10
        },
        labelLine: {
          show: true,                    // 显示引导线
          // length: 10,                    // 第一段长度
          // length2: 15,
          smooth: true                  // 可选：true 表示曲线
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        data: [
          { value: 114, name: '危机' },
          { value: 98, name: '预警' },
          { value: 517, name: '一般' },
          { value: 2125, name: '健康' }
        ]
      }
    ]
  };
    // 图2相关配置
  option2 = {
    tooltip: {
      trigger: 'item'
    },
    label: {
      show: true, // 改为 true，否则看不到标签
      position: 'center', // 可选：'inside', 'outside', 'center'
      formatter: '{d}%', // 使用 {d}% 显示百分比
      color: 'rgba(0, 0, 0, 0.6)', // 可选：设置字体颜色
      fontSize: 12
    },
    series: [
      {
        name: '来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        center: ['50%', '50%'],
        label: {
          show: true,
          position: 'outside',           // 标签在外部
          formatter: '{b}\n{d}%',        // 显示名称 + 换行 + 百分比
          // formatter: '{b}: {d}%',     // 也可以写在同一行
          color: '#333',
          fontSize: 10
        },
        labelLine: {
          show: true,                    // 显示引导线
          smooth: true                  // 可选：true 表示曲线
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        itemStyle: {
          borderRadius: 2,
          borderColor: '#fff',
          borderWidth: 1
        },
        data: [
          { value: 12, name: '适应' },
          { value: 45, name: '人际关系' },
          { value: 78, name: '学校压力' },
          { value: 12, name: '抑郁' },
          { value: 207, name: '焦虑' }
        ]
      }
    ]
  };

    // 设置图形配置
    option1 && myChart1.setOption(option1);
    option2 && myChart2.setOption(option2);

    // 监听窗口 resize 事件
    const handleResize = () => {
        myChart1?.resize();
        myChart2?.resize();
    };

    // 添加窗口变化的监听事件
    window.addEventListener('resize', handleResize);

    // 组件卸载前移除监听，防止内存泄漏
    onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        // 销毁图表实例
        myChart1?.dispose();
        myChart2?.dispose();
    });

})
</script>

<template>
<div class="box">
    <div class="title"><img src="@/assets/images/home/首页各个功能标题前图标.png" alt="" width="22px" height="22px" style="margin-right: 10px">学校心理健康情况</div>
    <div class="graph-box">
        <div id="graph1">dddddddddddddddd</div>
        <div id="graph2">w</div>
    </div>
</div>
</template>

<style scoped>
.box {
    width: 1200px;
    height: 530px;
    margin: 0 auto;
    margin-top: 54px;
    /* background-color: pink; */
}
.title {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding-left: 30px;
  padding-bottom: 30px;
}
.graph-box {
    display: flex;
    justify-content: space-between;
    height: 476px;
    background-color: white;

}
#graph1 {
    width: 50%;
    height: 100%;
    /* background-color: red; */
}
#graph2 {
    width: 50%;
    height: 100%;
    /* background-color: blue; */
}
</style>
